<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />

		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "../DataTables-1.9.4/media/css/demo_page.css";
			@import "../DataTables-1.9.4/media/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="../DataTables-1.9.4/media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="../DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
		<script src="../Highcharts-3.0.1/js/highcharts.js"></script>
		<script src="../Highcharts-3.0.1/js/highcharts-more.js"></script>
		<script src="../Highcharts-3.0.1/js/modules/exporting.js"></script>
		<script src="../TrackTables-0.0.1/tracktables_0.1.js"></script>
				<script>


					/* Data set */

									NameIndex = [0];
								    ChartColnames = ["Name",'Peaks', 'Genes',
								                   'PeaksInGenes', 'Motifs', 'Co-occur',
								                   "BigWig",
								                   1,2,3,4,5,6,7,8,9,10,12,13,14,15,16,17,18,19,21,22,23,24,25,26,27,28,29,31,32,33,34,35,36,37,38,39,41,42,43,44,45,46,47,48,49,51,
								                   "Samples","Inputs",
								                   ];

								    Data=[
								    ["Tom",5,3,10,7,2,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S13-AR-CHIP-LNCAP-LM-HES6-BICALUTAMIDE.bwa_Processed.bw",1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,3,3,3,3,4,4,4,5,5,5,3,3,3,3,3,2,2,2,2,2,1,1,1,1,0.8,10,12,13,18,20],
								    ["Bill",2, 2, 3,2, 1,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S11-E2F1-CHIP-LNCAP-LM-HES6-VEHICLE.bwa_Processed.bw",1,2,3,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.5,10,12,14,18,20],
								    ["Ted",3, 4, 4, 2, 5,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S12-E2F1-CHIP-LNCAP-LM-HES6-VEHICLE.bwa_Processed.bw",1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,4,9,9,9,4,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1.3,0.3,10,12,15,18,20]
								    ];


								  	ChartIndex =[1,2,3,5];
									var Trial = '#container2'

								  	var crazy;
									var Trial2 = '#dynamic'
									var Trial3 = "#example"
								  	ChartIndex2 =[0,1,2,3,4];

									var crazy2;
									var Trial21 = '#dynamic1'
									var Trial31 = "#example1"
								  	ChartIndex21 =[0,1,3,4];

								  	ChartIndex3 =[7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51];
									var Trial4 = '#container3'

								  	ChartIndex4 =[53,54];
									var Trial5 = '#container4'

									ChartIndex5 =[55,56,57,58,59];
									var Trial6 = '#container5'

//var nameIndex = [0];
//var chartColnames = ["Name",'Peaks', 'Genes','PeaksInGenes', 'Motifs', 'Co-occur',"BigWig",								                   1,2,3,4,5,6,7,8,9,10,12,13,14,15,16,17,18,19,21,22,23,24,25,26,27,28,29,31,32,33,34,35,36,37,38,39,41,42,43,44,45,46,47,48,49,51,
//"Samples","Inputs",
//];

//var data=
//[
//["Tom",5,3,10,7,2,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S13-AR-CHIP-LNCAP-LM-HES6-//BICALUTAMIDE.bwa_Processed.bw",1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,3,3,3,3,4,4,4,5,5,5,3,3,3,3,3,2,2,2,2,2,1,1,1,1,0.8,10,12,13,18,20],
//["Bill",2, 2, 3,2, 1,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S11-E2F1-CHIP-LNCAP-LM-HES6-VEHICLE.bwa_Processed.bw",1,2,3,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.5,10,12,14,18,20],
//["Ted",3, 4, 4, 2, 5,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S12-E2F1-CHIP-LNCAP-LM-HES6-VEHICLE.bwa_Processed.bw",1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,4,9,9,9,4,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1.3,0.3,10,12,15,18,20]
//];


var allChartIndicies = [[1,2,3,5],[7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],[53,54],[55,56,57,58,59]]
var allChartNames = ["#container2","#container3","#container4","#container5"]

var allTableIndicies = [[0,1,2,3,4],[0,1,3,4]]
var allTableNames = [["#dynamic","#example"],["#dynamic1","#example1"]]
var allChartTypes = ["barchart","linechart","bubblechart","boxplot"]


function HighTables(data,nameIndex,chartColnames,allChartNames,allChartIndicies,allTableNames,allTableIndicies,allChartTypes)
{


this.data=data
this.chartIndicies=allChartIndicies
this.chartNames=allChartNames
this.tableNames=allTableNames
this.tableIndicies=allTableIndicies
this.nameIndex=nameIndex
this.chartColnames = chartColnames
this.chartTypes= allChartTypes


}


$.fn.dataTableExt.oApi.fnFilterAll = function(oSettings, sInput, iColumn, bRegex, bSmart) {
    var settings = $.fn.dataTableSettings;

    for ( var i=0 ; i<settings.length ; i++ ) {
      settings[i].oInstance.fnFilter( sInput, iColumn, bRegex, bSmart);
    }
};


functionAtRedraw = function () {

			if ( typeof this != 'undefined' ) {
				//var divsObject = document.getElementsByTagName("div");
				//console.log(divsObject[0])
				//console.log(divsObject)
									//for(var i = 0; i < divsObject.length; i++){
									   //do something to each div like
									   //console.log(divsObject[i].id);
									//}
				var filtIndex = this.fnGetColumnData(0)
				DataTemp2 = filterMainTable(Data,filtIndex)
				var oSettings = this.fnSettings();
				//console.log(oSettings.oPreviousSearch.sSearch)
				highChart = make2dArrayForHighChartsBar(ChartColnames,DataTemp2,ChartIndex,NameIndex)
				makeHighChartBar(highChart,Trial)



				highChartline = make2dArrayForHighChartsLine(ChartColnames,DataTemp2,ChartIndex3,NameIndex)
				makeHighChartLine(highChartline,Trial4)

				highChartBubbleByCat = make2dArrayForHighChartsBubbles(ChartColnames,DataTemp2,ChartIndex4,NameIndex)
				makeHighChartBubbleByCategory(highChartBubbleByCat,Trial5)

				highChartBoxPlot = make2dArrayForHighChartsBoxplot(ChartColnames,DataTemp2,ChartIndex5,NameIndex)
				makeHighChartBoxPlot(highChartBoxPlot,Trial6)
			}

		}



makeDataTable = function (dataTable,Trial2,Trial3,functionAtRedraw,ToFilter) {
	$(Trial2).html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
	crazy = $(Trial3).dataTable( {
		//"sPaginationType": "bootstrap",
		"aaData": dataTable["aaData"],
		"aoColumns": dataTable["aoColumns"],
		"fnDrawCallback": functionAtRedraw,
		"oSearch": {"sSearch": ToFilter}
	} );
	//crazy.fnGetColumnData();


	return crazy
}

makeDataTable2 = function (dataTable,Trial21,Trial31,functionAtRedraw,ToFilter) {
	$(Trial21).html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example1"></table>' );
	crazy2 = $(Trial31).dataTable( {
		//"sPaginationType": "bootstrap",
		"aaData": dataTable["aaData"],
		"aoColumns": dataTable["aoColumns"],
		"fnDrawCallback": functionAtRedraw,
		"oSearch": {"sSearch": ToFilter}
	} );
	//crazy2.fnGetColumnData();
	return crazy2
}

/* API method to get paging information */
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
    return {
        "iStart":         oSettings._iDisplayStart,
        "iEnd":           oSettings.fnDisplayEnd(),
        "iLength":        oSettings._iDisplayLength,
        "iTotal":         oSettings.fnRecordsTotal(),
        "iFilteredTotal": oSettings.fnRecordsDisplay(),
        "iPage":          oSettings._iDisplayLength === -1 ?
            0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
        "iTotalPages":    oSettings._iDisplayLength === -1 ?
            0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
    };
}

/* Bootstrap style pagination control */
$.extend( $.fn.dataTableExt.oPagination, {
    "bootstrap": {
        "fnInit": function( oSettings, nPaging, fnDraw ) {
            var oLang = oSettings.oLanguage.oPaginate;
            var fnClickHandler = function ( e ) {
                e.preventDefault();
                if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
                    fnDraw( oSettings );
                }
            };

            $(nPaging).addClass('pagination').append(
                '<ul>'+
                    '<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
                    '<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
                '</ul>'
            );
            var els = $('a', nPaging);
            $(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
            $(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
        },

        "fnUpdate": function ( oSettings, fnDraw ) {
            var iListLength = 5;
            var oPaging = oSettings.oInstance.fnPagingInfo();
            var an = oSettings.aanFeatures.p;
            var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);

            if ( oPaging.iTotalPages < iListLength) {
                iStart = 1;
                iEnd = oPaging.iTotalPages;
            }
            else if ( oPaging.iPage <= iHalf ) {
                iStart = 1;
                iEnd = iListLength;
            } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
                iStart = oPaging.iTotalPages - iListLength + 1;
                iEnd = oPaging.iTotalPages;
            } else {
                iStart = oPaging.iPage - iHalf + 1;
                iEnd = iStart + iListLength - 1;
            }

            for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
                // Remove the middle elements
                $('li:gt(0)', an[i]).filter(':not(:last)').remove();

                // Add the new list items and their event handlers
                for ( j=iStart ; j<=iEnd ; j++ ) {
                    sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
                    $('<li '+sClass+'><a href="#">'+j+'</a></li>')
                        .insertBefore( $('li:last', an[i])[0] )
                        .bind('click', function (e) {
                            e.preventDefault();
                            oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
                            fnDraw( oSettings );
                        } );
                }

                // Add / remove disabled classes from the static elements
                if ( oPaging.iPage === 0 ) {
                    $('li:first', an[i]).addClass('disabled');
                } else {
                    $('li:first', an[i]).removeClass('disabled');
                }

                if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
                    $('li:last', an[i]).addClass('disabled');
                } else {
                    $('li:last', an[i]).removeClass('disabled');
                }
            }
        }
    }
} );


$(document).ready(function() {

			var hightablesObj = new HighTables(Data,NameIndex,ChartColnames,allChartNames,allChartIndicies,allTableNames,allTableIndicies,allChartTypes)
			//console.log(hightablesObj.tableNames)
			//console.log(hightablesObj.tableNames.length)

				console.log(1)
				dataTable = make2dArrayForDataTable(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.tableIndicies[0],hightablesObj.nameIndex)
				crazy = makeDataTable(dataTable,hightablesObj.tableNames[0][0],hightablesObj.tableNames[0][1],functionAtRedraw,"")
				dataTable2 = make2dArrayForDataTable(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.tableIndicies[1],hightablesObj.nameIndex)
				crazy2 = makeDataTable2(dataTable,hightablesObj.tableNames[1][0],hightablesObj.tableNames[1][1],functionAtRedraw,"")

				var oTable = $(".display").dataTable();
				console.log(oTable)

				//console.log(oTable.oSettings.oPreviousSearch.sSearch)

				$("#example1_filter input").keyup( function () {
				// Filter on the column (the index) of this element
				//console.log(oTable.oSettings.oPreviousSearch.sSearch)
				oTable.fnFilterAll(this.value);
				} );

				$("#example_filter input").keyup( function () {
								// Filter on the column (the index) of this element
								oTable.fnFilterAll(this.value);
								//console.log(oTable.oSettings.oPreviousSearch.sSearch)
				} );


			var ChartIndiciesBar = find("barchart",hightablesObj.chartTypes)
			var ChartIndiciesBubble = find("bubblechart",hightablesObj.chartTypes)
			var ChartIndiciesBox = find("boxplot",hightablesObj.chartTypes)
			var ChartIndiciesLine = find("linechart",hightablesObj.chartTypes)

			for (j=0;j<ChartIndiciesBar.length;j++)
			{
				highChart = make2dArrayForHighChartsBar(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.chartIndicies[ChartIndiciesBar[j]],hightablesObj.nameIndex)
				makeHighChartBar(highChart,hightablesObj.chartNames[ChartIndiciesBar[j]])
			}
			for (j=0;j<ChartIndiciesBubble.length;j++)
			{
			highChartBubbleByCat = make2dArrayForHighChartsBubbles(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.chartIndicies[ChartIndiciesBubble[j]],hightablesObj.nameIndex)
			makeHighChartBubbleByCategory(highChartBubbleByCat,hightablesObj.chartNames[ChartIndiciesBubble[j]])
			}


			for (j=0;j<ChartIndiciesBox.length;j++)
			{
			console.log(hightablesObj.chartIndicies[ChartIndiciesBox[j]])
			highChartBoxPlot = make2dArrayForHighChartsBoxplot(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.chartIndicies[ChartIndiciesBox[j]],hightablesObj.nameIndex)
			console.log(highChartBoxPlot)
			makeHighChartBoxPlot(highChartBoxPlot,hightablesObj.chartNames[ChartIndiciesBox[[j]]])
			}


			for (j=0;j<ChartIndiciesLine.length;j++)
			{
			console.log(hightablesObj.chartIndicies[ChartIndiciesLine[j]])
			highChartline = make2dArrayForHighChartsLine(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.chartIndicies[ChartIndiciesLine[j]],hightablesObj.nameIndex)
			console.log(highChartline)
			makeHighChartLine(highChartline,hightablesObj.chartNames[ChartIndiciesLine[[j]]])
			}


});





</script>

	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				TrackTables Example
			</div>

			<h1>Preamble</h1>
			<p>Short demo to work with Highcharts, DataTables and dynamically link to IGV</p>

			<h1>Live example</h1>
			<div id="dynamic1"></div>
			<div class="spacer"></div>
			<div id="container2" style="height: 300px"></div>
			<div id="container3" style="height: 300px"></div>
			<div id="container4" style="height: 300px"></div>
			<div id="container5" style="height: 300px"></div>
			<div class="spacer"></div>
			<div id="dynamic"></div>
			<button onclick="myFunction()">Try it</button>
			  </body>
<
